<template>
  <div class="refine_ensure supervise guarantee">
    <div class="contant" style='position: relative; background: #fff!important;'>
      <div class="tab-title">
        <ul>
          <li class="" @click="proRouter"><img src="../../../assets/pro-icon.png">生产线</li>
          <li class="" @click="enRouter"><img src="../../../assets/ensure-icon.png">监管线</li>
          <li class="active" @click="supRouter"><img src="../../../assets/supervise-icon.png">保障线</li>
        </ul>
        <i class="el-icon-close stat_close" @click="goBack"></i>
        <div @click="showNo" class="show-btn"><img src="../../../assets/show.png" :class='showDiv?"showimg":"hideimg"'/></div>
      </div>

      <el-row :gutter='20' class="ensure-tit" v-if="showDiv">
        <el-col :span='24' class="ensure-div">
          <el-col :span="2">
            <span class='label'>搜救力量</span>
          </el-col>
          <el-col :span="8">
            <el-checkbox v-model="check10" @change='changeCheck10'>
              <img src='../../../assets/sosjg.png' class="el-check-img">搜救机构</el-checkbox>
            <el-select clearable class="select-width-180" @change='changeSosOrg' v-model="sosOrgid" placeholder="请选择">
              <el-option v-for="item in sosOrg" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-checkbox v-model="check1" @change='changeCheck1' class="el-check-label6">
              <img src='../../../assets/poship.png' class="el-check-img">{{title1}}</el-checkbox>
              <span class="list-icon" @click="scheck(title1)"><img src='../../../assets/list.png'></span>
          </el-col>
          <el-col :span="5">
            <el-checkbox v-model="check2" @change='changeCheck2' class="el-check-label8">
              <img src='../../../assets/soship.png' class="el-check-img">{{title2}}</el-checkbox>
              <span class="list-icon"  @click="scheck(title2)"><img src='../../../assets/list.png'></span>
          </el-col>
          <el-col :span="4">
            <el-checkbox v-model="check3" @change='changeCheck3' class="el-check-label5">
              <img src='../../../assets/fly.png' class="el-check-img">{{title3}}</el-checkbox>
              <span class="list-icon" @click="scheck(title3)"><img src='../../../assets/list.png'></span>
          </el-col>

        </el-col>
        <el-col :span='24' class="line-height-css">
          <el-col :span="2">
            <span class='label'>溢油力量</span>
          </el-col>
          <el-col :span="4">
            <el-checkbox v-model="check4" @change='changeCheck4' class="el-check-label6">
              <img src='../../../assets/emship.png' class="el-check-img">{{title4}}</el-checkbox>
              <span class="list-icon" @click="scheck(title4)"><img src='../../../assets/list.png'></span>
          </el-col>
          <el-col :span="4">
            <el-checkbox v-model="check5" @change='changeCheck5' class="el-check-label5">
              <img src='../../../assets/emku.png' class="el-check-img">{{title5}}</el-checkbox>
              <span class="list-icon"  @click="scheck(title5)"><img src='../../../assets/list.png'></span>
          </el-col>
        </el-col>
        <el-col :span='24' class="line-height-css">
          <el-col :span="2">
            <span class='label'>执法力量</span>
          </el-col>
          <el-col :span="4">
            <el-checkbox v-model="check12" @change='changeCheck12'>
              <img src='../../../assets/lawjg.png' class="el-check-img">{{title6}}</el-checkbox>
          </el-col>
          <el-col :span="4">
            <el-checkbox v-model="check6" @change='changeCheck6'>
              <img src='../../../assets/people.png' class="el-check-img">{{title7}}</el-checkbox>
          </el-col>
        </el-col>
        <el-col :span='24' class="line-height-css">
          <el-col :span="2">
            <span class='label'>执法装备</span>
          </el-col>
          <el-col :span="4">
            <el-checkbox v-model="check8" @change='changeCheck8' class="el-check-label5">
              <img style="width: 20px;height: 14px;" src='../../../assets/ld-icon.png' class="el-check-img">{{title8}}</el-checkbox>
              <span class="list-icon" @click="scheck(title8)"><img src='../../../assets/list.png'></span>
          </el-col>
          <el-col :span="4">
            <el-checkbox v-model="check13" @change='changeCheck13' class="el-check-label5">
              <img style="width: 20px;height: 14px;" src='../../../assets/vts.svg' class="el-check-img">{{title12}}</el-checkbox>
              <span class="list-icon" @click="scheck(title12)"><img src='../../../assets/list.png'></span>
          </el-col>
          <el-col :span="4">
            <el-checkbox v-model="check9" @change='changeCheck9' class="el-check-label_cctv">
              <img src='../../../assets/CCTV.png' class="el-check-img">{{title9}}</el-checkbox>
              <span class="list-icon" @click="scheck(title9)"><img src='../../../assets/list.png'></span>
          </el-col>
          <el-col :span="4">
            <el-checkbox v-model="check7" @change='changeCheck7'>
              <img src='../../../assets/carrier.png' class="el-check-img">{{title10}}</el-checkbox>
          </el-col>
          <el-col :span="4">
            <el-checkbox v-model="check11" @change='changeCheck11' style="display: none;">
              <img src='../../../assets/car.png' class="el-check-img">{{title11}}</el-checkbox>
          </el-col>
        </el-col>
      </el-row>

      <div id="mapbzxmap" style="width:100%;height:92%"></div>


    </div>
  </div>
</template>
<script src='./Guarantee.js'></script>
<style>
  @import '../../../../static/css/leaflet.css';
  @import '../../../../static/css/L.Control.MousePosition.css';
  @import '../../../../static/css/Control.MiniMap.css';
  @import '../../../../static/css/Control.FullScreen.css';
  /*平移按钮*/
  @import '../../../../static/css/L.Control.Pan.css';
  /*地图缩放级别*/
  @import '../../../../static/css/L.Control.Zoominfo.css';
  /*量尺*/
  @import '../../../../static/css/leaflet-ruler.css';
  @import "../../../../static/css/leaflet-measure.css";
  @import "../../../../static/css/leaflet.groupedlayercontrol.css";
  @import '../../../../static/css/leaflet.marker.highlight.css';
</style>
<style lang='scss' src='./GuaranteeLLMap.scss'></style>
<style lang='scss' src='./Guarantee.scss' scoped></style>

<style lang="scss">
  .guarantee{
    .el-checkbox__label{
      color: #606266!important;
    }
  }
</style>
